<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-header">

            <div style="float:left">
                <span class="layui-breadcrumb">
                    <a href="/main">首页</a>
                    <a><cite>分类列表</cite></a>
                </span>
            </div>
            <a style="float:right" href="/cateAdd" class="layui-btn layui-btn-warm layui-btn-sm">增加分类</a>
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>分类名称</th>
                        <th>分类图标</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <% for(var i=0;i<cates.length;i++){ %>
                        <tr>
                            <td><%= cates[i].cateName %></td>
                            <td>
                                <img src="<%= cates[i].cateIcon %>" alt="">
                            </td>
                            <td>
                                <button data-id="<%= cates[i]._id %>" class="del layui-btn layui-btn-danger layui-btn-xs">删除</button>
                                <a href="/cateEdit?cateId=<%= cates[i]._id %>" class="layui-btn layui-btn-info layui-btn-xs">编辑</a>
                            </td>
                        </tr>
                    <%}%>    
                </tbody>
            </table>
            <div id="mypage"></div>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['element', 'jquery','laypage','layer'], function () {
            var element = layui.element;
            var $ = layui.jquery;
            var laypage = layui.laypage;
            var layer = layui.layer;
            laypage.render({
                elem: 'mypage' //注意，这里的 test1 是 ID，不用加 # 号
                ,curr:<%= curr %>
                ,count: <%= count %> //数据总数，从服务端得到
                ,limit:2
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    
                    //首次不执行
                    if(!first){
                   
                        window.location.href=`/cateList?curr=${obj.curr}&pageSize=${obj.limit}`
                    }
                }
            });
            // 删除分类
            $(".del").click(function(){
               /*  if( confirm("您确认删除吗") ){
                    alert("删除")
                } */
                let _id = this.dataset.id;
                var layer1 = layer.open({
                    type:"0",
                    title:"删除",
                    content:"您确认删除吗?",
                    btn:['确认','取消']
                    ,yes: function(index, layero){
                        $.ajax({
                            url:"/editDel",
                            type:'POST',
                            data:{
                                _id
                            },
                            dataType:'json',
                            success:function(res){
                               if(res.code == 0){
                                   layer.msg(res.msg,()=>{
                                    history.go(0);
                                   });
                                   
                               }else{
                                layer.msg(res.msg);
                               }
                            }
                        })
                        // layer.close(layer1);
                    }
                    ,btn2: function(index, layero){
                        layer.msg("取消删除")
                    }
                });
            })
        })
    </script>
</body>

</html>